<!--<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
#zoom{width:512px ; height: 288px; position: relative;}
#small{width: inherit;height: inherit;position: relative;}
#small img{display: block;width: inherit; height: inherit;}
#mask{width: 100px;height: 100px;position: absolute;background: rgba(255,255,255,0.8);}
#big{position: absolute; top: 0;left: 522px;overflow: hidden;display: none;}
#big img{position: absolute;top: 0;left: 0;}            
</style>
<body>
<div id="zoom">
            <div id="small">
                <img src="C:\Users\14129\Pictures\QQ图片20191011151332.jpg">
            </div>
            <div id="big">
                <img src="C:\Users\14129\Pictures\QQ图片20191011151332.jpg">
            </div>
        </div>
</body>
<script src="词库模型.js"></script>
<script>
var small = $("#small")[0],big = $("#big")[0],bimg = $("#big img")[0],simg = $("#small img")[0],maxH,maxW,mask
var zoom = 4;
//注意获取图片的方式啊
//simg = $("#small")[0]>img 错误的
//simg = $("#small img")[0] 正确的
console.log(bimg);
small.addEventListener("mouseenter",function(){
    //老师那里传入个e我先不传看看效果
    mask = document.createElement("div");
    //注意创建方式  要加变量  要加document
    
    mask.id = "mask";
    small.appendChild(mask);
    //注意啊这里是创建插入，后面要删除而不是隐藏
    maxW = small.offsetWidth-mask.offsetWidth;
    maxH = small.offsetHeight-mask.offsetHeight;
    
    big.style.display = "block";
    big.style.width = mask.offsetWidth*zoom+"px";
    big.style.height = mask.offsetHeight*zoom+"px";
    bimg.style.width = this.offsetWidth*zoom+"px";
    bimg.style.height = this.offsetHeight*zoom+"px";
})
    small.addEventListener("mousemove",function(e){
        var nleft=e.clientX-$("#zoom")[0].offsetLeft-mask.offsetWidth/2;
        var ntop=e.clientY-$("#zoom")[0].offsetTop-mask.offsetHeight/2;
        if (nleft<0) nleft = 0;
        if (nleft>maxW) nleft = maxW;
        if (ntop<0) ntop=0;
        if (ntop>maxH) ntop=maxH;
        mask.style.left = nleft+"px";
        mask.style.top = ntop+"px";
        bimg.style.left = -nleft*zoom+"px";
        bimg.style.top = -ntop*zoom+"px";
    })

    small.addEventListener("mouseleave",function(){
        big.style.display = "none";
        this.removeChild(mask)
    })

</script>
</html>-->

<!--<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">

</style>
<body>
<input type="text" id="username" placeholder="请输入用户名">
<input type="text" id="email" value="请输入email">
<input type="text" id="phone">
<select name="" id="word">
    <option>AAA</option>
    <option>BBB</option>
    <option>CCC</option>
    <option>DDD</option>
</select>
</body>
<script type="text/javascript">
function $(s){
    return document.querySelectorAll(s);
}
var username = $("#username")[0],email = $("#email")[0],phone = $("#phone")[0]
/*
onfocus:获取焦点
onblur:失去焦点
onchange:改变值的时候触发，input在失去焦点时，检测值是否改变
        select：选择不同与当前的选项时触发
不存在事件冒泡： 
事件委托？？？
 */
email.onfocus = function(){
    console.log(this.id);
}
email.onblur = function(){

}
phone.onchange = function(){
    console.log(this.value);
}

/*
for循环时动态的改变了绑定了li的事件，此事件未执行

1000/60  100/6==16.6···
 */
for (var i = 0; i < oli.length; i++) {
    (function(n){
    oli[n].onclick = function(){
        console.log(n);
    }
    })(i);//实参是i，形参是n
}


</script>
</html>-->


<!--DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="sl"></div>

</body>
<script type="text/javascript">
//1.str="HTML5+CSS3+JavaScript";
//封装函数，将str转换成["javascript","css3","html"];
str="HTML5+CSS3+JavaScript";
function dd(str){
var a = str.toLowerCase();
var b = a.split("+");
var c = b.reverse();
console.log(b);
}
dd(str);
//2.有数组["images/1."]
var hs = ["images/1.jpg","images/2.jpeg","images/3.gif"];
function tp(arr){
    for (var i = 0; i < arr.length; i++) {
        console.log(arr[i].slice(arr[i].indexOf(".")))
    }
}
tp(hs);
//3
// var  a = 1;
// function ab(){
//     console.log(a);
//     var a = 3;
// }
// ab();
// console.log(a);
//4.通过遍历数组，设置iD为btn的按钮，看100px，高40，红色
var arr = ["width","height","color"];
var arr1 = ["100px","40px","red"];
var i = 0;
var j = 0;
var but = document.createElement("button");
but.id = "btn";
var body = document.body;
console.log(arr[i])
body.appendChild(but);
// but.style.width = 100+"px";
// but.style.height = 40+"px";
// but.style.color = "red";
function aaa(arr,arr1){
    if (i<arr.length&&j<arr1.length) {
        but.style[arr[i]]=[arr1[j]];
        i++;
        j++;
    }else{
        return false;
    }
}
aaa(arr,arr1)
// function bl(arr,arr1){
//     for (var i = 0; i < arr.length; i++) {
//         inof() }
// }
// bl(arr,arr1)
//5.

var arr6=["word","password","gameover"];
var div=document.getElementById("sl")
    function cd(z){
     for (var i = 0; i < z.length; i++) {
         var btn=document.createElement("button");
         btn.innerHTML=z[i];
         div.appendChild(btn)
        div.onclick=function(e){
            if (e.target.tagName=="BUTTON") {
                console.log(e.target.innerHTML)
            }

         }
     }
    }
    cd(arr6)
    </script>
    </html -->
<!--
/*
字符串
1、长度
2、indexOf
3、lastIndexOf
4、search
5、slice
6、substring
7、substr
8、replace
9、大小写
10、拼接
11、根据位置获取字符
12、分割成数组
13、数字和字符串相加
 */
-->

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
ul{margin: 0;padding:0;}
li{list-style: none;}
#menu{position: relative;}
#menu li{position: absolute;width:80px;height: 40px;
    border: 1px solid #DDD;top:0; line-height: 40px;
    text-align: center;top: 100px;}

</style>
<body>
<div id="menu">
    <ul id="menulist">
        <li>金融</li>
        <li>新闻</li>
        <li>经济</li>
        <li>科技</li>
        <li>军事</li>
        <li>天气</li>
        <li>体育</li>
        <button id="sortBtn">点击切换</button>
    </ul>
</div>
<div>
 
 </div>
<script>
function $(s){
    return document.querySelectorAll(s);
}
var menu=$("#menu")[0],
menulist = $("#menulist")[0],
sortBtn=$("#sortBtn")[0],
arr=[],
oli =$("#menulist li");
for (var i = 0; i < oli.length; i++) {//生成left值
   oli[i].style.left = i*92+"px";
   arr.push(i); 
}
sortBtn.addEventListener("click",function(){
    var _arr=[],posArr=[];
    while(_arr.length<arr.length){
        var ranIndex=Math.floor(Math.random()*arr.length);
        if (_arr.indexOf(ranIndex)==-1) {
            _arr.push(ranIndex);
            posArr.push({left:oli[ranIndex].style.left});
        }
    }
    for (var j = 0; j < _arr.length; j++) {
        oli[j].style.left=posArr[j].left;
        oli[j].style.transition="left 1s";
    }
})

var a = setTimeout(function(){
    console.log(11)
},1000);

console.log(document.documentElement.clientHeight);
</script>
</body>
</html>
